A tag Input destina-se a armazenar informações digitadas pelo usuário para futuro envio ao servidor ou efetuar interações com o usuário de maneira que ele possa clicar em botões, selecionar opções e outros itens como veremos abaixo.
Esta é uma das tags fundamentais do HTML. Ela é muito versátil por ser muito ampla e saber usar ela é obrigatório em qualquer desenvolvimento de site web seja lá qual for o leiaute ou a linguagem que você estiver programando.
Uma das finalidades da tag <input> é especificar um campo texto de entrada onde o usuário pode inserir dados. Na web 1.0 ou 2.0 era só texto e se você quisesse especificar que no campo texto deveria ter uma data válida teria que fazer isso via JavaScript. Mas, graças a deus, isso mudou.
Para dar mais versatilidade a tag e evitar desenvolver novos scripts a tag input possui parâmetros que define que tipo de dados ela deverá aceitar
ou conter. Sendo assim contamos com os tipos ( que aceita textos ):
Checkbox, Date, Datetime-Local, Email, File, Hiden, Month, Number, Password (senha), Radio, Range, Search, Tel(Telefone),Text, Time, URL, Week
Mas temos a tag input com parâmetros onde ela NÃO serve para entrar com texto mas sim para que o usuário selecione opções ou interaja com a página como Button, Checkbox, Color, Image, Radio, Range, Reset, Submit.
A tag input aceita os dados mas é o tag form que define um conjunto de campos a serem enviados ao servidor. A tag form conta com um 'disparador de envio' que nada mais é a tag 'input type=submit' que aciona o envio dos dados. No servidor existe um engine (mecanismo) chamado CGI ( Common Gateway Interface ) implementado em todos os servidores web que implementa a funcionalidade de envio das informações ao servidor web. Portanto toda página HTML pode enviar dados ao servidor. Contudo você precisa de um componente do lado do servidor (server-side) que trata e/ou armazena as informações enviadas.
Exemplo de Código:
<form action="" method="get">
<div>
<label for="nome">Digite seu nome: </label>
<input type="text" name="nome" id="nome" required />
</div>
<div>
<label for="email">Digite seu e-mail: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Enviar" />
</div>
</form>
Note que o parâmetro action da tag form está em branco. Ele deveria conter a url da página do servidor que receberia as informações e as trataria. Por exemplo : "cadUsuario.aspx"
A tag form determina os campos que devem ser enviados ao servidor ( um container de campos ) e a tag 'input type=submit' envia os dados ao servidor.
Importante: você pode por javascript acrescentar elementos ao html dinamicamente mas esses 'novos' elementos criados não serão enviados ao servidor no submit / postback da página. É um mecanismo de segurança no servidor que barra esta criação.
Só para mencionar você pode criar 'cookies' que nada mais são que documentos texto e armazenar esses dados no próprio ambiente do cliente ( client-side ) mas o usuário precisa permitir a utilização de cookies para que isto funcione.
Note que a tag HTML input não tem a tag de fechamento.
Uma tag com tantas finalidades precisa de muitos parâmetros para implementar essas finalidades. Em negrito estão aquelas que você tem que conhecer.
| Atributo | Valor | Descrição |
|---|---|---|
| accept | file_extension, audio/*, video/*, image/*, media_type | Especifica um filtro para quais tipos de arquivo o usuário pode selecionar na caixa de diálogo de entrada de arquivo (apenas para type = "file") |
| align | left, right, top, middle, bottom | Não suportado no HTML5. Use a CSS para isto. Especifica o alinhamento de uma entrada de imagem (apenas para type="image") |
| alt | text | Especifica um texto alternativo para imagens ou algum quesito da tag não for encontrada (apenas para type="image") |
| autocomplete | on, off |
Especifica se o elemento <input> deve ter o preenchimento automático ativado ou desativado. Só é útil quando for criado um dicionário de possibilidades para o campo e isto significa muitas recargas da página, o que não é muito comum num site comercial mas é comum num site da intranet da empresa. |
| autofocus | autofocus | Especifica que elemento <input> deve receber o foco automaticamente quando a página é carregada |
| checked | checked | Especifica que o elemento <input> deve ser pré-selecionado ( marcado, ticado )quando a página carregar (para type="checkbox" ou type="radio") |
| dirname | inputname.dir | Especifica que a direção do texto será enviado |
| disabled | disabled | Especifica que o elemento <input> seja apresentado como desativado. Com isto o operador não pode alterar o dado mas poderá visualizar a informação presente nele. |
| form | form_id |
Especifica o formulário ao qual o elemento <input> pertence. É um 'container'' para selecionar o que deve ser enviado ao servidor. |
| form action | URL | Especifica a URL do arquivo que receberá os dados quando o formulário for enviado (para type="submit" e type="image"). |
| form enctype | 'application/x-www-form-urlencoded' ou 'multipart/form-data' ou 'text/plain' |
Especifica como os dados do formulário devem ser codificados ao enviá-los para o servidor (para type = "submit" e type = "image"). Este parâmetro é utilizado no envio de imagens ao servidor (form-upload). Contudo, por motivos de segurança, o form só poderá enviar o arquivo, qualquer tag input tipo texto não será enviada quando colocada num form com este parâmetro. |
| form method | 'get' ou 'post |
Define o método HTTP para enviar dados para o URL da ação (para type = "submit" e type = "image"). Se este parametro for 'get' os dados serão passados de uma página para outra diretamente pela url onde o sinal de interrogação define o fim da url e o início dos parâmetros e o e comercial (&) define a separação entre parâmetros. Veja um exemplo de como seria uma transferência de página com 'form method=get' no exemplo mencionado acima: cadCliente.asp?nome=dado_digitado1&email=dado_digitado_2. Na página de destino para pegar esse dado utilizaríamos : varNome= Request.Querystring("nome"). Note que o 'form method=get' não é seguro portanto deve ser usado com informações que não são sigilosas e, normalmente, é necessário criar proteções porque se o usuário colocar na url um dado inválido poderá causar erro na página. Se este parametro for 'post' os dados serão passados dentro do código da página no submit ( mime-type ). Sendo assim é bem mais seguro que o metodo get. Sendo assim a url da página não seria afetada e ficaria assim: cadCliente.asp. Na página de destino para pegar esse dado utilizaríamos : varNome= Request.Form("nome"). Note que para receber os dados precisamos de um mecanismo que permita isso no servidor, normalmente é um 'mecanismo' CGI implementado em páginas ASP,ASPNET, Java, etc... |
| form novalidate | form novalidate | Especifica que os dados do formulário não devem ser validados no envio.Somente para type = "submit" |
| form target | _blank, _self, _parent, _top, framename |
Especifica como a nova página deverá ser aberta, ou seja, onde exibir a resposta que é recebida após o envio do formulário
(para type = "submit" e type = "image"). 1• Se nada for mencionado ou for usado o parâmetro target=self a página atual terá seu conteúdo alterado para o conteúdo da página de destino. 2•target='_blank' faz com que a página atual fique como está e uma nova página seja aberta com o conteúdo da página de destino. 3•target='parent' faz com que a nova página seja carregada na página que chamou a página corrente, ou seja, na página pai da página atual. 4•target='top' faz com que a página de destino seja aberta em cima da atual e não podemos ir para as outras páginas anteriores que estão ao fundo da atual. Este estilo é chamado de top-most ou a página no topo. |
| height | pixels | Especifica a altura de um elemento <input> (apenas para type = "image"). Note que em algumas situações se tivermos uma caixa de texto a altura do elemento é definido pelo fonte ou estilo de letra utilizado na página, ou seja, quem determina a altura é o próprio elemento html. |
| list | datalist_id | Refere-se a um elemento <datalist> que contém opções predefinidas para o elemento <input> |
| max | número ou data | Especifica o valor máximo para o elemento <input> |
| maxlength | number |
Especifica o número máximo de caracteres permitido no elemento <input> Importante definir este parâmetro para evitar perda dados. Vamos supor que num campo texto você não defina o tamanho e numa reclamação o cliente colocou um texto com 2000 palavras. Se você salvar só os 100 primeiros caracteres no seu site com certeza o usuário vai reclamar por ter perdido tempo digitando tudo aquilo. Normalmente colocamos um javascript informando quantos caracteres faltam para o tamanho máximo do campo. |
| min | número ou data | Especifica um valor mínimo para o elemento <input> |
| multiple | multiple | Especifica que um usuário pode inserir mais de um valor em um elemento <input> |
| name | text |
Nome do elemento <input> Fundamental para recuperação do conteúdo do campo no envio dos dados ao servidor porque identifica o campo a se obter as informações como, por exemplo, Request.Form("nome")...nome é o 'name' do campo. |
| pattern | regexp |
Especifica uma expressão regular com a qual o valor de um elemento <input> é verificado. Muito útil na validação ou formação do campo. |
| placeholder | text |
Especifica uma dica curta que descreve o valor esperado de um elemento <input>. Como menciono neste documento, o texto do placeholder é exibido ao usuário dentro do campo texto mas se o texto estiver dentro de um form e for dado um submit nesse form este 'texto' não será enviado ao servidor, irá em branco. |
| readonly | readonly |
Especifica que um campo de entrada é somente leitura, ou seja, não pode ser alterado pelo usuário. Utilizado quando queremos que o usuário visualize se o valor esta correto porque, possivelmente, no futuro será enviado ao servidor. |
| required | required | Especifica que um campo de entrada deve ser preenchido antes de enviar o formulário. |
| size | numérico inteiro | Número Especifica a largura, em caracteres, de um elemento <input>. É a melhor maneira de especificar a largura do campo texto sem com isto criar uma limitação do tamanho do campo, ou seja, este tamanho informa quanto espaço na tela o elemento deve ocupar mas não afeta o tamanho do elemento input. |
| src | URL | Especifica o URL da imagem a ser usada como um botão de envio (apenas para type="image") |
| step | numérico inteiro | Especifica o intervalo entre números legais em um campo de entrada |
| type - tipo | button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week |
Especifica o tipo <input> elemento a ser exibido. Esta tag é realmente o 'canivete suiço' do html...serve para tudo ( ou quase ). |
| value | texto | Especifica o valor inicial para o elemento, um default value <input>. Note que se o usuário não alterar este valor no submit da página este valor será enviado ao servidor. |
| width | pixels | Especifica a largura de um elemento <input> (apenas para type = 'image')>. Use o parâmetro size para determinar a largura do campo texto. |
Quando você coloca o parâmetro value na tag mesmo que o usuário não digite nada esse 'value' será enviado de volta ao servidor no submit/post da página.
Quando você coloca apenas o parâmetro placeholder o valor colocado lá será exibido como fundo e conteúdo do campo mas ao enviar o campo ao servidor esse valor não será enviado ao servidor, será enviado branco, vazio se o usuário não digitar nada.
Código: <input type="button" placeholder="Dica" value="Value" />
Prático mas muito feito...veja como fica o mesmo botão com bootstrap:
Tipo botão :
Código:
Tipo botão : <input type="button" class="btn btn-primary" placeholder="Dica" value="Value" /><br />
A finalidade deste elemento é no clique dele disparar um evento através do evento onclick que será tratado por um javascript ou jquery.
Este elemento é utilizado quando queremos que o usuário escolha entre n opções como no exemplo abaixo:
Sexo:
Masculino
Feminino
Código :
<input type="checkbox" placeholder="Dica" value="Value" /> Masculino<br />
<input type="checkbox" placeholder="Dica" value="Value" /> Feminino<br />
A finalidade deste elemento é receber a opinião do usuário que pode ou não clicar nele e firmar uma escolha.
Note que o usuário pode escolher um ou outro independentemente.
Importante : As caixas exibidas por este controle atuam de maneira independente. Assim sendo podemos clicar num ou em outra sem que interfiram uma com a outra. Diferente da tag input type=radio onde apenas uma opção do grupo pode ser selecionada.
Tipo file :
Código :
Tipo file : <input type="file" placeholder="Dica" value="Value" />
Abre o File-Picker(Caixa de diálogo para escolha de arquivo) do windows. Muito utilizado para fazer file upload ( envio de arquivos para o servidor)
Nota : Para que este controle funcione você tem que parametrizar a tag form enctype tipo : <form method="post" enctype="multipart/form-data">
Importante : As caixas exibidas por este controle atuam de maneira dependente, ou seja, apenas uma do grupo poderá ser selecionada. Assim sendo ao clicar numa delas e em seguida em outra a primeira será 'desclicada'. Diferente da tag input type=checkbox onde qualquer uma pode ser selecionada independentemente.
Guarde bem o conteúdo desta página pois ela é fundamental no conceito desenvolvimento web.